<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Using globalToLocal #2</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<!-- Note: All core EaselJS classes are listed here: -->

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var canvas;
	var stage;

	var _mouseIsDown;
	var _mouseX;
	var _mouseY;

	var spin1;		// nested invisble container to generate a spirograph effect
	var spin2;		// nested invisble container to generate a spirograph effect

	var shape;		// drawing shape
	var color;		// drawing color
	var lastPt;		// last draw position
	var graphics;
	var count = 0;
	var colorOffset;
	var text;

	//
	//
	// This demo is not heavily commented because it is a direct derivative of globalToLocal1
	//
	//

	function init() {
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);

		// this prevents the stage from clearing, so we only draw one vector line each tick, and it
		// is painted onto the canvas, then removed.
		stage.autoClear = false;

		canvas.onmousemove = mouseMove;
		canvas.onmousedown = mouseDown;
		canvas.onmouseup = mouseUp;

		// Alpha Rectangle, applied each frame at the bottom, fading out the previous content over time.
		var fade = new createjs.Shape(new createjs.Graphics().f("#FFF").dr(0, 0, canvas.width, canvas.height));
		fade.alpha = 0.02;
		stage.addChild(fade);

		shape = new createjs.Shape();
		shape.y = 276;
		graphics = shape.graphics;

		// middle spinner:
		spin2 = new createjs.Container();
		spin2.addChild(shape);
		spin2.x = 391;

		// outside spinner:
		spin1 = new createjs.Container();
		spin1.addChild(spin2);
		spin1.x = canvas.width / 2;
		spin1.y = canvas.height / 2;
		stage.addChild(spin1);

		text = new createjs.Text("Click and Drag", "36px Arial", "#777777");
		text.textBaseline = "middle";
		text.x = 360;
		text.y = canvas.height / 2;
		stage.addChild(text);

		//start ticking
		createjs.Ticker.interval = 20;		// 20ms = 50fps
		createjs.Ticker.addEventListener("tick", tick);

		stage.update(); // Draw the stage once
	}

	function tick(event) {
		//spin objects
		spin1.rotation += 10.7;
		spin2.rotation += -7.113;
		shape.rotation += 1.77;

		if (_mouseIsDown) {

			var color = createjs.Graphics.getHSL(
							Math.cos((count++) * 0.1) * 30 + colorOffset,
							100,
							50,
							0.8);

			graphics.setStrokeStyle(Math.random() * 20, "round").beginStroke(color);
			graphics.moveTo(0, 0);
			lastPt = shape.globalToLocal(_mouseX, _mouseY);
			graphics.lineTo(lastPt.x, lastPt.y);

			// draw the new vector line to the canvas:
			stage.update(event);

			// then clear the shape's vector data so it isn't rendered again next tick:
			graphics.clear();
		}
	}

	//start drawing
	function mouseDown(event) {
		if (!event) {
			var e = window.event;
		}
		stage.removeChild(text);
		if (_mouseIsDown) {
			return;
		}
		_mouseIsDown = true;
		colorOffset = Math.random() * 360;
		lastPt = shape.globalToLocal(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
	}

	//stop drawing
	function mouseUp() {
		_mouseIsDown = false;
	}

	//update mouse positions
	function mouseMove(e) {
		if (!e) {
			var e = window.event;
		}
		_mouseX = e.pageX - canvas.offsetLeft;
		_mouseY = e.pageY - canvas.offsetTop;
	}

</script>
</head>

<body onload="init();">
<header class="EaselJS">
	<h1>GlobalToLocal</h1>

	<p>Similar to globalToLocal1.html, but <code>Stage.autoClear</code> is set
		to false (so the stage never clears itself), and the
		vector <code>Shape</code> is cleared each tick, so only one line is
		rendered per tick. As such, you can draw continuously
		without a slow down. A mostly-transparent rectangular shape is drawn
		each frame to fade out content over time.
	</p>
</header>

<div>
	<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
